<template>
    <el-card>
        <div class="mod-dept">
            <el-form :inline="true">
                <el-form-item>
                    <el-button v-if="isAuth('easbaseinfo:dept:save')" type="primary" @click="addOrUpdateHandle()">新增
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table :data="deptListTree" row-key="deptId"
                :tree-props="{children: 'list', hasChildren: 'hasChildren'}">
                row-key="menuId" border style="width: 100%; ">
                <el-table-column prop="deptName" header-align="center" align="left" min-width="100" label="学院/部门">
                </el-table-column>
                <el-table-column prop="parentId" header-align="center" align="center" min-width="100" label="上级学院/部门">
                </el-table-column>
                <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="isAuth('easbaseinfo:dept:update')" type="text" size="small"
                            @click="addOrUpdateHandle(scope.row.deptId)">修改</el-button>
                        <el-button v-if="isAuth('easbaseinfo:dept:delete')" type="text" size="small"
                            @click="deleteHandle(scope.row.deptId,scope.row.deptName)">
                            删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
        </div>
    </el-card>
</template>

<script>
import { deptApi } from '@/api/baseinfo'
import { treeDataSetParent } from '@/utils';
import addOrUpdate from './dept-add-or-update.vue';

export default {
    components: {
        addOrUpdate
    },
    props: {},
    data() {
        return {
            deptListTree: [],
            addOrUpdateVisible: false
        };
    },
    watch: {},
    computed: {},
    methods: {
        getDataList() {
            deptApi.getdeptListTree().then(({ data }) => {
                this.deptListTree = data
                treeDataSetParent(data, 'deptName')
            })

        },
        addOrUpdateHandle(id) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },

        deleteHandle(id,name) {

            var ids = [id ]
            this.$confirm(`确定对[${name }]进行删除操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deptApi.deleteDept(ids).then(() => {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.getDataList()
                        }
                    })

                })
            }).catch(() => { })
        }
    },
    created() {
        this.getDataList()
    },
    mounted() {

    }
};
</script>

<style lang="scss">
//
</style>

<style lang="scss" scoped>
.el-card {
    max-width: 60rem;
    min-width: 34rem;
    margin: 5rem auto;
}
</style>
